import 'antd/dist/reset.css' // 引入 Ant Design 样式
import { BrowserRouter as Router, useRoutes, useLocation, Link, useNavigate } from 'react-router-dom'
import './App.css'
import { Layout, Menu, Button } from 'antd'
import { useEffect, useState } from 'react'
import routes from './routes/routes'
import menuItems from './menus/menuConfig' // 引入菜单配置
import React from 'react'
import { LogoutOutlined } from '@ant-design/icons' // 引入退出图标
import SessionStorageUtil from './utils/sessionStorageUtil'

const { Header, Content, Sider } = Layout

function AppRoutes() {
  return useRoutes(routes)
}

function AppContent() {
  const [collapsed, setCollapsed] = useState(false) // 控制菜单收缩状态
  const location = useLocation() // 获取当前路由信息
  const navigate = useNavigate() // 用于跳转页面

  // 使用 useEffect 监听路由变化
  // 如果用户未登录且当前路由不是登录页，则跳转到登录页
  // 这里的逻辑是检查 sessionStorage 中是否有用户信息，如果没有，则跳转到登录页
  useEffect(() => {
    // 检查用户是否已登录
    const isLoggedIn = !!SessionStorageUtil.getItem('user')

    // 如果未登录且当前路径不是登录页，则跳转到登录页
    if (!isLoggedIn && !['/login', '/'].includes(location.pathname)) {
      // 如果当前路径不是登录页，则跳转到登录页
      navigate('/login', { replace: true })
    }
  }, [location, navigate]) // 监听路由变化

  // 判断是否为登录页面
  const isLoginPage = location.pathname === '/login'|| location.pathname === '/'

  // 退出登录逻辑
  const handleLogout = () => {
    // 清除用户信息（如从 sessionStorage 中移除）
    sessionStorage.removeItem('user')
    // 跳转到登录页面
    navigate('/login')
  }

  // 递归生成菜单项
  const renderMenuItems = (items) =>
    items.map((item) => ({
      key: item.key,
      icon: item.icon ? React.createElement(item.icon) : null, // 动态渲染图标
      label: item.path ? <Link to={item.path}>{item.label}</Link> : item.label, // 如果有路径则使用 Link
      children: item.children ? renderMenuItems(item.children) : null, // 递归渲染子菜单
    }))

  return isLoginPage ? (
    // 如果是登录页面，直接渲染路由内容
    <AppRoutes />
  ) : (
    // 如果不是登录页面，使用 Layout 布局
    <Layout style={{ minHeight: '100vh' }}>
      <Header
        style={{
          color: 'white',
          display: 'flex',
          justifyContent: 'space-between',
          alignItems: 'center',
          background: '#001529', // Ant Design 默认深色背景
        }}
      >
        <div>React Admin</div>
        <Button
          type="text"
          icon={<LogoutOutlined />}
          style={{ color: 'white' }}
          onClick={handleLogout}
        >
          退出登录
        </Button>
      </Header>
      <Layout>
        <Sider
          collapsible
          collapsed={collapsed}
          onCollapse={(value) => setCollapsed(value)} // 切换收缩状态
          width={230}
          theme="dark"
        >
          <Menu
            theme="dark"
            mode="inline"
            defaultSelectedKeys={['1']}
            items={renderMenuItems(menuItems)} // 使用递归渲染菜单项
          />
        </Sider>
        <Layout>
          <Content
            style={{
              padding: '24px',
              background: '#fff',
              display: 'flex',
              flexDirection: 'column',
              flex: 1, // 占满剩余空间
            }}
          >
            <AppRoutes />
          </Content>
        </Layout>
      </Layout>
    </Layout>
  )
}

function App() {
  return (
    <Router>
      <AppContent />
    </Router>
  )
}

export default App
